// vuex-demo，备份版本
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const moduAs = {
    state:{
        binge:'张三',
        names: '斌哥',
        ages: '18',
        height:0
    },
    actions:{
        ActionChangeModulsBinge(context,val){   // context就是store对象
            context.commit('clickChangeModulsBinge',val)    //这里使用了mutations中的clickChangeModulsBinge方法
        },
        setUserName(context){
            console.log(`actions中的context到底是什么：${context}`)
        },
        func1({commit},palod){  // es6从context解构出commit
            commit('setAges',palod)
        }
    },
    mutations:{
        clickChangeModulsBinge(state,val){  // 当前moduls中的state，（binge不要重命名？）
           state.binge = val
        },
        setUserName(state,payload){
            state.height = payload
        },
        setAges(state, payload='马马'){
            state.ages = payload    // 修改state中ages
            console.log(`mutations提示ages值是：${state.ages}`); // 在profile.vue输出：老刘
        }
    },
    getters:{
        bingeAdd(state){    // 计算state返回给views.vue层用
            return state.binge + '李四'
        },
        newHeight(state){
            return state.height*2
        }
    }
}

const moduleAs = {
    state:{
        email:'554115339@qq.com'
    },
    mutations:{
        setEmail(state,payload){
            state.email = payload
        }
    }
}

const moduleBs = {
    state:{
        tel:'99999999'
    }
}

const store = new Vuex.Store({
    state: {    // 统一状态管理
        count: 0,
        list: [
            { id: 'bin', age: 16 },
            { id: 'ma', age: 23 },
            { id: 'sum', age: 18 },
            { id: 'sus', age: 25 },
        ],
        infor: {
            name: '斌哥',
            age: 19
        },
        names: '斌哥',
        ages: '18',
        height:0
    },
    mutations: {    // 只有mutations才能修改state状态
        increment(state) {
            state.count++
        },
        jianNum1(state) {
            state.count--
        },
        // mutations携带1个参数
        addNums(state, nums) {
            return state.count += nums;
        },
        //   传入多个参数，风格1
        // addObjet(state, objs) {
        //     return state.list.push(objs)
        // }
        // 风格2
        addObjet(state, objs) {
            return state.list.push(objs.obj)
        },

        // 响应式修改添加infor数据
        upAddr(state, addrObj) {
            // 虽然添加到state.infor中，但不会被vue响应式系统监听到
            // Object.assign(state.infor,addrObj)
            // 可以被vue响应式监听,(这里写死了addrs，增加一个addrs)
            Vue.set(state.infor, 'addrs', addrObj.addrs)

            // 如果要删除对象属性，delete Obj.key无法响应式，要使用Vue.delete才能删除
            // Vue.delete(state.infor,age)
        },

        // 接受actions中提交的修改操作
        actiChangeMutatiInfor(state) {
            // 修改infor数据
            // return state.infor.age = '马马'

            // 增加height属性，必须通过Vue.set()
            Vue.set(state.infor, 'height', '180')

        },
        setUserName(state,payload){
            state.height = payload
        },
        setAges(state, payload='马马'){
            state.ages = payload    // 修改state中ages
            console.log(`mutations提示ages值是：${state.ages}`); // 在profile.vue输出：老刘
        }
    },
    getters: {  // 好比vue中的computed计算属性，供xxx.vue调用{{$store.getters.funcName(xxx)}}，对state中的数据做前期的筛选
        // 基本使用
        mo20(state) {
            return state.list.filter(val => val.age > 20)
        },
        // getters中使用getters
        mo20length(state, getters) {  // 参数名字自定义，state就是store中的state，getters就是store中的getters
            return getters.mo20.length
        },
        // 传参
        mo20lenthAuto(state) {
            return (nums) => {  // getters传参nums，想传参一定是返回一个函数
                return state.list.filter(val => val.age > nums)
            }
        },
        newHeight(state){
            return state.height*2
        }

    },
    actions: {  // actives存在的意义就是分离异步操作，避免mutations臃肿
        // context上下文
        actiChangeInfor(context, payload) {   //携带payload，参数
            // 模拟异步操作1
            // setTimeout(()=>{
            //     context.commit("actiChangeMutatiInfor");
            //     console.log(payload.message);
            //     payload.funName()

            // },1000)

            // 模拟异步操作2：优雅方法：使用Promise返回一个.then()
            return new Promise( resolve => {   //Promise参数可选
                setTimeout(() => {
                    context.commit("actiChangeMutatiInfor");
                    console.log(payload);
                    resolve('Promise返回的resolve文字');    //返回一个.then()
                }, 1000)
            })
        },
        setUserName(context){
            console.log(`actions中的context到底是什么：${context}`)
        },
        func1({commit},palod){  // es6从context解构出commit
            commit('setAges',palod)
        }
    },
    modules:{   // 将store分割成模块，避免臃肿
        modua:moduAs,
        moduleA:moduleAs,
        moduleB:moduleBs,
    }
})


export default store;